<template>
	<LayoutFull :enableAside="true">
		<template #header_left></template>
		<template #header_right>
			<el-button type="primary" @click="handleAdd">新增</el-button>
			<el-button @click="handleEdit">修改</el-button>
			<!-- <el-button @click="handleCopy">复制</el-button> -->
			<!-- <el-button @click="handleMove">移动</el-button> -->
			<el-button @click="handleDelete" type="danger">删除</el-button>
		</template>
		<template #aside>
			<RkMenuTree ref="menuTreeRef" @nodeClick="handleTreeNodeClick" @currentChange="handleTreeNodeChange" />
		</template>
		<template #main>
			<rk-center>
				<template #content>
					<rk-grid
						ref="tableGridRef"
						:="tableOptions"
					>
						<template #toolbar_right>
							<el-input v-model="queryParams.menuName"
                placeholder="请输入菜单名称"
                style="width: 300px;"
                @change="handleSearch"
                clearable>
              </el-input>
						</template>
						<template #menu-icon="{ row }">
							<RkIcon :name="row.icon" v-if="row.icon"/>
							<span v-else></span>
						</template>
					</rk-grid>
				</template>
			</rk-center>
		</template>
		<MenuInfoDialog ref="menuInfoDialogRef" :parentNode="selectTreeNode" @confirm="handleConfirm" />
	</LayoutFull>
</template>

<script setup>
import XEUtils from 'xe-utils';
import { RkMenuTree } from '@/components/tree';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useMenuApi } from '@/api';
import { RkConfirmBox } from '@/components/message-box';

import MenuInfoDialog from './dialogs/MenuInfoDialog.vue';

const { deleteMenu } = useMenuApi();

// 获取当前路由
const route = useRoute();

// ----- 树结构操作
const menuTreeRef = ref();
const selectTreeNode = ref();
const handleTreeNodeClick = (data, treeNode) => {
	queryParams.menuCode = data.menuCode;
	queryParams.menuName = ''
	selectTreeNode.value = XEUtils.clone(data, true);
	handleSearch();
};
const handleTreeNodeChange = (data, treeNode) => {
	selectTreeNode.value = XEUtils.clone(data, true);
};

// ----- 表格相关操作
const queryParams = reactive({
	menuCode: '',
	menuName: ''
});
const tableGridRef = ref();
const tableColumns = reactive([
	{ field: 'menuCode', treeNode: true, title: '菜单编码', sortable: true, width: 180, align: 'left' },
	{ field: 'menuName', title: '菜单名称', width: 200, align: 'left' },
	{ field: 'menuAlias', title: '菜单别名', width: 200, align: 'left' },
	{ field: 'menuOrder', title: '菜单排序', width: 100, align: 'left' },
	{
		field: 'status',
		title: '是否启用',
		width: 100,
		align: 'center',
		formatter: ['enumsFormats', 'COMMON_STOP_OPEN_MT_ENUMS'],
	},
	{
		field: 'invisible',
		title: '是否显示',
		width: 100,
		align: 'center',
		formatter: ['enumsFormats', 'MENU_INVISIBLE_ENUMS'],
	},
	{
		field: 'menuType',
		title: '菜单类型',
		width: 100,
		align: 'center',
		formatter: ['enumsFormats', 'MENU_TYPE_ENUMS'],
	},
	{ field: 'permission', title: '权限标识', width: 150, align: 'left' },
	{ field: 'icon', title: '菜单图标', width: 100, align: 'center', slots: { default: 'menu-icon' } },
	{ field: 'parentId', title: '父级菜单', width: 150, align: '' },
	{ field: 'routerPath', title: '路由路径', width: 200, align: 'left' },
	{ field: 'routerComponent', title: '组件地址', width: 280, align: 'left' },
	// { field: 'routerRedirect', title: '重定向路径', width: 200, align: 'left' },
	{ field: 'fullUrl', title: '请求地址', width: 320, align: 'left' },
	{ field: 'levelNo', title: '菜单次级', width: 100, align: 'center' },
	{ field: 'routerLink', title: '外链地址', width: 250, align: 'left' },
]);
const tableOptions = reactive({
	title: route.meta.title,
	params: queryParams,
	columns: tableColumns,
	dataUrl: '/menu/getMenuList',
	boxConfig: 'radio',
	seqConfig: false,
	treeConfig: {
		rowField: 'menuCode',
		expandAll: true,
		transform: true,
		parentField: 'parentId'
	},
	pagerConfig: false,
})
const handleSearch = () => {
	tableGridRef.value.searchEvent();
};

const menuInfoDialogRef = ref(null);
const handleAdd = () => {
	if (selectTreeNode.value) {
		const { fullData } = tableGridRef.value.getTableData();
		menuInfoDialogRef.value.handleAdd({
			tableData: fullData,
			currentRow: {},
			parentNode: selectTreeNode.value,
		});
	} else {
		selectMessageTip('请选择菜单节点进行操作!')
	}
};
const handleEdit = () => {
	const row = tableGridRef.value.getRadioRecord();
	if (row) {
		const { fullData } = tableGridRef.value.getTableData();
		menuInfoDialogRef.value.handleEdit({
			tableData: fullData,
			currentRow: row,
			parentNode: selectTreeNode.value,
		});
	} else {
		selectMessageTip()
	}
};
const handleCopy = () => {
	const row = tableGridRef.value.getRadioRecord();
	if (row) {
		const params = { menuId: row.menuId }
		RkConfirmBox({
			title: '提示',
			content: '确定复制已选数据？',
			onSubmit: function () {
				useMenuApi().copyMenu(params).then(res => {
					const { code, msg } = res;
					if (code === 200) {
						ElMessage.success('复制成功！');
						handleConfirm();
					} else {
						ElMessage.error(msg);
					}
				}).catch(err => {
					ElMessage.error('复制失败！');
				})
			},
			onCancel: function () {},
		});
	} else {
		selectMessageTip()
	}
}
const handleDelete = () => {
	const row = tableGridRef.value.getRadioRecord();
	if (row) {
		const params = { menuCode: row.menuCode };
		RkConfirmBox({
			title: '提示',
			content: '确定删除已选数据？',
			onSubmit: function () {
				deleteMenu(params)
					.then((res) => {
						const { code, msg } = res;
						if (code === 200) {
							ElMessage.success('删除成功！');
							handleConfirm();
						} else {
							ElMessage.error(msg);
						}
					})
					.catch((err) => {
						ElMessage.error('删除失败！');
					});
			},
			onCancel: function () {},
		});
	} else {
		selectMessageTip()
	}
};
const handleConfirm = () => {
	menuTreeRef.value.reloadTreeData();
	handleSearch();
};

const selectMessageTip = (message) => {
	ElMessage({
		type: 'warning',
		grouping: true,
		repeatNum: 1,
		message: message || '请选择一条数据进行操作！',
	});
}

</script>

<style lang="scss" scoped></style>
